<template>
  <div style="overflow-x: auto;overflow-y: hidden;">
    <div class="constrc-box" v-for="(item,index) in listData" :key="index">
      <div class="constrc-item" v-for="(ite,idx) in item.datas" :key="idx">
        <div
          :class="['text-color','clearfix',{'red': ite.status === 0,
         'blue': ite.status === 1,'gray': ite.status === -1, 
         'yellow': ite.status === 2}]"
        >
          <i :class="{'el-icon-caret-right':ite.stage===1}" style="font-size:20px;" />
          <span>{{idx===0?(`${item.project_name}（${ite.stageName}）`):ite.stageName}}</span>
          <i
            :class="{'el-icon-question':ite.passStatus===-1,
            'el-icon-success':ite.passStatus==1,
            'el-icon-error':ite.passStatus==0}"
          />
        </div>
        <p v-if="ite.startTime&&ite.endTime">{{`${ite.startTime}至${ite.endTime}`}}</p>
        <p v-else>--</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    listData: {
      type: Array,
      default: () => []
    }
  },
  created() {
    // console.log(this.$props.listData,'compont-boxdDtas')
  }
};
</script>

<style lang="scss" scoped>
.text-color {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  padding: 2px 0;
  i {
    float: left;
    &:last-child {
      float: right;
      padding-right: 8px;
      padding-top: 4px;
    }
  }
}
.red {
  background: #ea5e56;
}
.blue {
  background: #3cbaff;
}
.yellow {
  background: #f59c25;
}
.gray {
  background: #a4a8ab;
}
.constrc-box {
  // width: 100%;
  // display: flex;

  white-space: nowrap;

  height: 40px;
  padding-top: 15px;
  .constrc-item {
    // flex: 1;

    display: inline-block;
    min-width: 200px;

    margin-left: 8px;
    text-align: center;
    &:first-child {
      margin-left: 0;
    }
    p {
      font-size: 13px;
      margin: 2px 0;
    }
  }
  &:last-child{
    padding: 15px 0;
  }
}
</style>
